<template>
  <view>
    <!--  <div class="message">{{title}}</div>-->
    <div class="background">
      <view class="rank" v-if="!(rankList === '')">
        <ul>
          <li class="rankStyle" v-for="(rank, index) in rankList" :key="index" >
            <div class="ranking">{{index + 1}}</div>
            <img class="avatar" v-bind:src="rank.user.userAvatarUrl" alt="头像"/>
            <div class="rankPeople">{{rank.user.nickName}}</div>
            <div class="rankScore">{{rank.score}}</div>
          </li>
        </ul>
      </view>

      <view class="myRank" v-if="!(myRank === '')">
        <div class="myRanking">{{myRank.rank}}</div>
        <img class="myAvatar" v-bind:src="myRank.scoreInfo.user.userAvatarUrl" alt="头像"/>
        <div class="myNickname">{{myRank.scoreInfo.user.nickName}}</div>
        <div class="myScore">{{myRank.scoreInfo.score}}</div>
      </view>
    </div>
  </view>
</template>

<script>
  export default {
    /**
     * rankList为使用api获取的排名前5的用户信息
     * myRank为用户自己的排名信息
     * serverIP为服务器IP
     */
    data () {
      return {
        title: 'rank page',
        rankList: '',
        myRank: '',
        serverIP: ''
      }
    },
    /**
     * 分别获取排行榜前五信息和用户本人的排名信息
     */
    onLoad () {
      const self = this
      this.serverIP = wx.getStorageSync('serverIP')
      console.log()
      wx.request({
        url: this.serverIP + '/score/all',
        header: { 'Content-Type': 'application/json' },
        method: 'GET',
        success (res) {
          self.rankList = res.data.params.rankList
        },
        fail (res) {
          wx.showToast({
            title: '网络出错，无法获取',
            icon: 'none',
            duration: 3000
          })
        }
      })
      var mpOpenId = wx.getStorageSync('mpOpenId')
      wx.request({
        url: this.serverIP + '/score?mpOpenId=' + mpOpenId,
        header: { 'Content-Type': 'application/json' },
        method: 'GET',
        success (res) {
          self.myRank = res.data.params
          console.log(res)
        },
        fail (res) {
          wx.showToast({
            title: '网络出错，无法获取',
            icon: 'none',
            duration: 3000
          })
        }
      })
    }
  }
</script>

<style>

  .background {
    background-image:url('');
    width: 100%;
    height: 1334rpx;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
  }

  .rankStyle {
    display: flex;
    font-size: 50rpx;
    width: 750rpx;
    margin: 55rpx;
    align-items: center;
  }

  .myRank {
    display: flex;
    width: 100%;
    margin: 70rpx 0 0 0;
    top: 1145rpx;
    font-size: 50rpx;
    align-items: center;
  }

  .myNickname {
    width: 40%;
    font-size: 40rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ranking {
    width: 10%;
    margin: 0 0 0 100rpx;
  }

  .myRanking {
    width: 10%;
    margin: 0 0 0 100rpx;
  }

  .rankPeople {
    width: 40%;
    font-size: 40rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rankScore {
    font-size: 45rpx;
    float: right;
  }

  .myScore {
    font-size: 45rpx;
    float: right;
  }

  .message {
    color: red;
    padding: 10px;
    text-align: center;
  }

  .rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 400rpx;
    padding-top: 200rpx;
  }

  .avatar {
    width: 110rpx;
    height: 110rpx;
    border-radius: 130rpx;
    background-color: #ffffff;
  }

  .myAvatar {
    width: 110rpx;
    height: 110rpx;
    border-radius: 130rpx;
    background-color: #ffffff;
  }

</style>
